<template>
  <CDrawer :title="adTaskDetail?.companyName" size="auto" v-model="detailVisible">
    <template #tips>
      <div class="g-flex-start-center">
        <span>数据周期：{{ empty(adTaskDetail?.fillPeriod) }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>产量（台）：{{ empty(adTaskDetail?.yield) }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>生产天数（天）：{{ empty(adTaskDetail?.workDay) }}</span>
      </div>
    </template>
    <div class="active-data-detail-container-wrapper">
      <div class="active-data-detail-container">
        <ActiveDataFill
          :businessKey="taskNo"
          hideTop
          isReadonly
          @loadedSuccess="handleLoadedSuccess"
          v-if="detailVisible"
        ></ActiveDataFill>
      </div>
    </div>
  </CDrawer>
</template>

<script lang="ts">
export default {
  name: 'ActiveDataDetailDrawer'
};
</script>
<script lang="ts" setup name="ActiveDataDetailDrawer">
import { defineProps, withDefaults, defineEmits, computed, Ref, ref } from 'vue';
import { CDrawer } from '@/components/CDrawer';
import ActiveDataFill from '@/views/todo/detail/FlowContentComponents/ActiveDataFill/index.vue';
import { empty } from '@/utils';
// 入参及格式
interface ActiveDataDialogProps {
  // 弹窗状态
  visible: boolean;
  // 任务编号
  taskNo: string;
}
const props = withDefaults(defineProps<ActiveDataDialogProps>(), {});
const emit = defineEmits(['update:visible']);
const detailVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});

const adTaskDetail = ref();
function handleLoadedSuccess(detail: Ref<any>) {
  adTaskDetail.value = detail.value;
}
</script>

<style lang="scss" scoped>
.active-data-detail-container-wrapper {
  padding: 12px;
  background: #f3f7fb;
  min-height: 100%;
  .active-data-detail-container {
    // padding: 12px;
    background: #fff;
    border-radius: 3px;
    :deep(.active-data-fill-container) {
      padding: 0 16px;
      .el-collapse {
        border: none;
        .el-collapse-item:last-child {
          margin-bottom: 0;
          .el-collapse-item__header {
            border-bottom: 0;
          }
          .el-collapse-item__wrap {
            border-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
